/*
 * @Author: Yzq
 * @Date: 2021-04-01 14:37:22
 * @LastEditTime: 2021-04-06 18:56:02
 * @LastEditors: Yzq
 */
import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  Image,
  Dimensions,
  DeviceEventEmitter,
} from 'react-native';
// import Locale from './res/Locale';
const {height, width} = Dimensions.get('window');
import I18n from './res';
import Use from './Dao/user';

class User extends React.Component {
  constructor(props: any) {
    super(props);
    props.navigation.setOptions({
      headerTitle: '',
    });
  }

  listener?: any;

  state = {
    isShowLanguage: false,
    isChinese: Use.isChinese || true,
  };

  componentDidMount() {
    //TODO:user页做监听 注意移除监听
    this.listener = DeviceEventEmitter.addListener('changeLanguage', () => {
      this.forceUpdate();
    });
  }

  componentWillUnmount() {
    //移除监听
    this.listener?.remove();
  }

  /* 语言列表 */
  _LaguageList = () => {
    const list = [
      {
        title: I18n.t('zh'),
        onPress: () => {
          this.setState(
            {
              isShowLanguage: false,
              isChinese: true,
            },
            () => {
              Use.storageLanguage(this.state.isChinese);
              I18n.locale = 'zh';
            },
          );
        },
      },
      {
        title: I18n.t('en'),
        onPress: () => {
          this.setState({
            isShowLanguage: false,
            isChinese: false,
          });
          Use.storageLanguage(this.state.isChinese);
          I18n.locale = 'en';
        },
      },
    ];

    return (
      <View>
        {list.map((item, index) => {
          return (
            <TouchableOpacity
              onPress={() => {
                item.onPress();
              }}
              style={{
                height: 40,
                borderWidth: 1,
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
                marginHorizontal: 20,
                marginTop: index === 0 ? 40 : 20,
              }}>
              <Text>{item.title}</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  };
  /* 点击切换语言 */
  _renderLanguage = () => {
    return (
      <View
        style={{
          backgroundColor: '#fff',
          width: '100%',
          height: 300,
          position: 'absolute',
          bottom: 0,
        }}>
        {/* 取消按钮*/}
        <TouchableOpacity
          onPress={() => {
            this.setState({
              isShowLanguage: false,
            });
          }}
          style={{
            width: 20,
            height: 20,
            position: 'absolute',
            right: 10,
            top: 5,
          }}>
          <Text style={{fontSize: 20}}>X</Text>
        </TouchableOpacity>
        {/* 语言按钮 */}
        {this._LaguageList()}
      </View>
    );
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'space-around',
          // flexDirection: 'row',
          alignItems: 'center',
        }}>
        {/* 切換語言 */}
        <TouchableOpacity
          style={{
            borderWidth: 1,
            width: width - 200,
            height: 40,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'black',
          }}
          onPress={() => {
            this.setState({
              isShowLanguage: true,
            });
          }}>
          <Text style={{fontSize: 17, color: '#fff'}}>
            {I18n.t('user.switch')}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            this.props.navigation.replace('Login');
          }}
          style={{
            borderWidth: 1,
            width: width - 200,
            height: 40,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'brown',
          }}>
          <Text style={{fontSize: 17, color: '#fff'}}>
            {I18n.t('user.log_out')}
          </Text>
        </TouchableOpacity>
        {this.state.isShowLanguage ? this._renderLanguage() : null}
      </View>
    );
  }
}

export default User;
